import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
import { defineComponent, PropType, VNode } from 'vue';
import { ITabExpPanel } from '@ibiz/model-core';
import { TabExpPanelController } from './tab-exp-panel.controller';
import './tab-exp-panel.scss';

export const TabExpPanelControl = defineComponent({
  name: 'IBizTabExpPanelControl',
  props: {
    modelData: { type: Object as PropType<ITabExpPanel>, required: true },
    context: { type: Object as PropType<IContext>, required: true },
    params: { type: Object as PropType<IParams>, default: () => ({}) },
    defaultTabName: { type: String, required: false },
  },
  setup() {
    const c = useControlController(
      (...args) => new TabExpPanelController(...args),
    );
    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);

    const handleTabChange = (): void => {
      c.handleTabChange();
    };

    return {
      c,
      ns,
      handleTabChange,
    };
  },
  render() {
    const { isCreated, tabPages } = this.c.state;
    return (
      <iBizControlBase controller={this.c}>
        {isCreated && (
          <el-tabs
            v-model={this.c.state.activeName}
            onTabChange={this.handleTabChange}
          >
            {tabPages.map(tab => {
              return (
                <el-tab-pane
                  class={[this.ns.e('tab-item')]}
                  label={tab.caption}
                  name={tab.tabTag}
                >
                  {{
                    label: (): VNode => {
                      return <span class={[...tab.class]}>{tab.caption}</span>;
                    },
                  }}
                </el-tab-pane>
              );
            })}
          </el-tabs>
        )}
      </iBizControlBase>
    );
  },
});
